<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@include file="/context/mytags.jsp"%>
<div class="table-scrollable">
	<table id="treetable" class="table table-striped table-hover table-success">
		<thead>
		<tr>
			<th width="40%">科室名称</th>
			<th width="35%">排序</th>
			<th width="25%">操作</th>
		</tr>
		</thead>
		<tbody>
		<c:forEach items="${departmentList }" var="department">
			<tr id="${department.id}" pId="${department.parentId }"
				<c:if test="${department.childNum > 0}">hasChild="true"</c:if>
			>
				<td><span controller="true">${department.departmentName}</span></td>
				<td>${department.sort}</td>
				<td>
					<a href="javascript:;" class="btn btn-sm blue" onclick="update('/department/department?id=${department.id}')">
						<i class="fa fa-edit"></i>编辑
					</a>
					<a href="javascript:;" class="btn btn-sm red" onclick="del('/department/delete?id=${department.id}')">
						<i class="fa fa-trash"></i>删除
					</a>
				</td>
			</tr>
		</c:forEach>
		</tbody>
	</table>
</div>
<script type="text/javascript">
    $(function(){
        $('#treetable').treeTable({
            theme: 'default',
            beforeExpand: function($treeTable, id){
                //判断id是否已经有了孩子节点，如果有了就不再加载，这样就可以起到缓存的作用
                if ($('.' + id, $treeTable).length) { return; }
                $.ajax({
                    type: 'post',
                    url: '<c:url value="/department/treeTable"></c:url>',
                    data: {parentId:id},
                    dataType: 'json',
                    success: function(data){
                        var rows = '';
                        for(var i = 0; i < data.length; i++){
                            var hasChild = '';
                            if(data[i].childNum > 0){
                                hasChild = 'hasChild="true"';
                            }
                            rows += '<tr id="'+data[i].id+'" pId="'+data[i].parentId+'" '+hasChild+'>\n'
                                + '<td><span controller="true">'+data[i].departmentName+'</span></td>\n'
                                +	'<td>'+data[i].sort+'</td>\n'
                                +	'<td>\n'
                                +	'<a href="javascript:;" class="btn btn-sm blue" onclick="update(\'/department/department?id='+data[i].id+'\')">'
                                +	'<i class="fa fa-edit"></i>编辑</a>\n'
                                +	'<a href="javascript:;" class="btn btn-sm red" onclick="del(\'/department/delete?id='+data[i].id+'\')">'
                                +	'<i class="fa fa-trash"></i>删除</a>\n'
                                +	'</td>\n'
                                +	'</tr>\n';
                        }
                        $treeTable.addChilds(rows);
                    }
                });
            }
        });
    });
</script>